<template>
  <div class="expose">
    <h1>父组件</h1>
    <div>子组件的数据是 ==== {{ msg }}</div>
    <button @click="callChild">调用子组件的方法</button>
    <Expose ref="com"></Expose>
  </div>
</template>

<script setup>
    import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
    import Expose from '../../components/expose';
     
    //通过ref 来绑定子组件
    const com = ref(null);
    
    const msg = ref('')

    onMounted(()=>{
        // 在加载完成后，将子组件的 message 赋值给 msg
        msg.value = com.value.message;
    })
    const callChild = ()=>{
         // 调用子组件的 changeMessage 方法 
         com.value.changeMessage('蒜头王八');

           // 重新将 子组件的message 赋值给 msg
           msg.value = com.value.message;
    }
</script>
<style scoped>
    .expose{
        width: 500px;
        height: 500px;
    }
</style>